<script setup>
//获取用户信息
//用户仓库
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();

</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-card class="hello-info" shadow="hover" style="margin-bottom: 18px;">
        <div slot="header" class="clearfix">
          <span>很高兴见到你🙌，{{ userStore.userInfo.realName }}！开始今天的工作吧😎</span>
        </div>
        <div class="text item">
          当前角色组：
          <el-tag size="small">{{ userStore.userInfo.sysRole && userStore.userInfo.sysRole.roleName }}</el-tag>
        </div>
      </el-card>
      <el-row>
        <el-col :span="18" style="padding-right: 20px">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <h4>项目基于</h4>
              </div>
            </template>
            <div style="display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;">
              <el-card shadow="hover" style="max-width: 270px;margin: 10px 0">
                <div slot="header" class="clearfix">
                  <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <img src="@/assets/logo.jpg" width="50" height="50" alt="Vue">
                    <el-button color="#019768">GO</el-button>
                  </span>
                </div>
                <div class="text item" style="font-size: 15px;color: #a5a5a5">
                  渐进式 JavaScript 框架 易学易用性能出色，适用场景丰富的 Web 前端框架Go
                </div>
              </el-card>
              <el-card shadow="hover" style="max-width: 270px;margin: 10px 0">
                <div slot="header" class="clearfix">
                  <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <img src="@/assets/logo.jpg" width="50" height="50" alt="Vue">
                    <el-button color="#4E43E5">GO</el-button>
                  </span>
                </div>
                <div class="text item" style="font-size: 15px;color: #a5a5a5">
                  Element Plus 基于 Vue3，面向设计师和开发者的组件库
                </div>
              </el-card>
              <el-card shadow="hover" style="max-width: 270px;margin: 10px 0">
                <div slot="header" class="clearfix">
                  <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <img src="@/assets/logo.jpg" width="50" height="50" alt="Vue">
                    <el-button color="#019768">GO</el-button>
                  </span>
                </div>
                <div class="text item" style="font-size: 15px;color: #a5a5a5">
                  渐进式 JavaScript 框架 易学易用性能出色，适用场景丰富的 Web 前端框架Go
                </div>
              </el-card>
              <el-card shadow="hover" style="max-width: 270px;margin: 10px 0">
                <div slot="header" class="clearfix">
                  <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <img src="@/assets/logo.jpg" width="50" height="50" alt="Vue">
                    <el-button color="#FBBF1F" style="color: white">GO</el-button>
                  </span>
                </div>
                <div class="text item" style="font-size: 15px;color: #a5a5a5">
                  Vite 下一代的前端工具链 为开发提供极速响应
                </div>
              </el-card>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <h4>项目信息</h4>
              </div>
            </template>
            <div style="display: flex;
    flex-direction: column;
    align-items: center;">
              <h4>XHang-Admin</h4>
              <span style="font-size: 13px">
                是一个基于Vue3.0、Vite、ElementPlus、TypeScript 的后台解决方案，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<style scoped>
.hello-info {
  background: url('@/assets/hello_info_background.png') no-repeat right var(--el-bg-color);
  background-size: 100px;
}

.clearfix {
  margin-bottom: 5px;
}
</style>